<template>
  <Breadcrumb :items="['detail.category.breadcrumb.home', 'detail.category.breadcrumb.case.category']" />
  <main class="table-container">
    <a-table :columns="columns" :data-source="list" :pagination="false" :loading="loading">
      <template #bodyCell="{ column, index, record }">
        <!-- 序号 -->
        <template v-if="column.key === 'index'">
          <span>{{ index + 1 }}</span>
        </template>
        <!-- 药膳配方-->
        <template v-if="column.key === 'Medifood_recipe'">
          <p v-html="record['Medifood_recipe']"></p>
        </template>
        <!-- 适应症 -->
        <template v-if="column.key === 'indication'">
          <p v-html="record['indication']"></p>
        </template>
        <!-- 操作 -->
        <template v-if="column.key === 'operation'">
          <a-tooltip title="查看" color="#2b4b68">
            <EyeOutlined class="eye-icon" @click="detailCase(record)" />
          </a-tooltip>
        </template>
      </template>
    </a-table>
    <!-- 分页器 -->
    <a-pagination
      v-model:current="curPage"
      v-model:pageSize="pageSize"
      show-size-changer
      :total="total"
      :show-total="(total: number) => `共 ${total} 条数据`"
    />
  </main>
  <!-- 弹窗： 原药膳详情为单独路由页面，后需求变更为使用弹窗 -->
  <a-modal
    v-model:open="open"
    title="药膳类型"
    :width="isFullScreen ? '100%' : '96%'"
    :wrap-class-name="isFullScreen ? 'full-modal' : ''"
    :footer="null"
  >
    <CaseDetail :id="activeId" @full-screen="handleFullScreen" />
  </a-modal>
</template>

<script setup lang="ts">
import { ref } from "vue"
import { useRoute } from "vue-router"
import { EyeOutlined } from "@ant-design/icons-vue"
import usePagination from "@/hooks/usePagination"
import { getCaseList } from "@/api/case/index"
import type { OralCaseRecord } from "@/api/case/type"

import CaseDetail from "../case/index.vue"

const route = useRoute()

const columns = [
  {
    title: "序号",
    key: "index",
    width: 68,
    align: "center"
  },
  {
    title: "药膳名称",
    dataIndex: "name",
    key: "name",
    align: "center",
    sorter: { compare: (a: OralCaseRecord, b: OralCaseRecord) => a.name.localeCompare(b.name) }
  },
  {
    title: "适应症",
    dataIndex: "indication",
    key: "indication",
    ellipsis: true,
    align: "center",
    sorter: { compare: (a: any, b: any) => a["indication"].localeCompare(b["indication"]) }
  },
  {
    title: "药膳配方",
    dataIndex: "Medifood_recipe",
    key: "Medifood_recipe",
    ellipsis: true,
    align: "center",
    sorter: { compare: (a: any, b: any) => a["Medifood_recipe"].localeCompare(b["Medifood_recipe"]) }
  },
  {
    title: "操作",
    key: "operation",
    align: "center"
  }
]
let initQuery = {}
let { id, searchKey, advancedSearch } = route.query
if (id) {
  initQuery = {
    classification_id: id
  }
} else if (searchKey) {
  initQuery = {
    searchKey: searchKey
  }
} else if (advancedSearch) {
  initQuery = {
    advancedSearch: advancedSearch
  }
}
let { curPage, total, pageSize, list, loading } = usePagination<OralCaseRecord>(getCaseList, {
  ...initQuery
})
let open = ref(false)
let activeId = ref("")
const detailCase = (record: OralCaseRecord) => {
  open.value = true
  activeId.value = record.id
}

let isFullScreen = ref(false)
const handleFullScreen = () => {
  isFullScreen.value = !isFullScreen.value
}
</script>

<style scoped lang="scss">
@import "./index.scss";
</style>
